<template>
  <transition name="fade">
  <div class="sql-agent-sidebar" :style="`width:${!isCollapse ? '200px' : '60px'}`" :class="`${!isCollapse ? 'animation-out' : 'animation-in'}`">
    <el-menu  :default-active="current" :collapse="isCollapse" active-text-color="#0043CE" router>
      <Item v-for="(router) in routes" :key="router.path" :router="router" />
    </el-menu>

    <div class="sql-agent-sidebar-operation">
      <Setting :isCollapse="isCollapse"/>
      <Controller :isCollapse="isCollapse"/>
    </div>
  </div>
  </transition>
</template>
<script>
import Setting from './Setting'
import Controller from './Controller'
import Item from './Item.vue'
import SqlAgentRoutes from '@/components/storybook/router/sqlAgent'
export default {
  components: {
    Setting,
    Controller,
    Item
  },
  computed: {
    isCollapse () {
      return this.$store.state.sqlAgent.collapse
    },
    routes () {
      return SqlAgentRoutes()[0].children.filter(v => !v.meta.hidden)
    },
    current () {
      const path = this.$route.path
      return path.split('/')[path.split('/').length - 1]
    }
  }
}
</script>
<style lang="scss" scoped>
.sql-agent-sidebar{
  width: 200px;
  box-shadow: 2px 0px 10px 0px rgba(0,0,0,0.1);
  background: #fff;
  overflow: hidden;
  position: relative;
  &-operation{
    position: absolute;
    bottom: 0;
    left: 0;
  }
  &.animation-out{
    animation: out .4s ;
    animation-fill-mode:forwards;
  }
  &.animation-in{
    animation:in .4s ;
    animation-fill-mode:forwards;
  }
  @keyframes out {
    0%{
      width: 60px;
    }
    100%{
      width: 200px;
    }
  }
  @keyframes in {
    0%{
      width: 200px;
    }
    100%{
      width: 60px;
    }
  }
}
</style>
